<template>
    <BreadCrumb ref="breadcrumb" :item="item"></BreadCrumb>
    <div class="common-wrapped">
        <div class="common-content">
            <el-tabs v-model="activeName" class="demo-tabs" >
                <el-tab-pane label="账号详情" name="first">
                    <div class="account-infor-wrapped">
                        <span>用户头像</span>
                        <div class="account-infor-content">
                            <el-upload
                                class="avatar-uploader"
                                action="http://127.0.0.1:3007/user/uploadAvatar"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="userStore.imageUrl" :src="userStore.imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户账号</span>
                        <div class="account-infor-content">
                            <el-input
                                v-model="userStore.account"
                                style="width: 240px"
                                disabled
                                placeholder="Please input"
                            />
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户身份</span>
                        <div class="account-infor-content">
                            <el-input
                                v-model="userStore.identity"
                                style="width: 240px"
                                disabled
                                placeholder="Please input"
                            />
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户部门</span>
                        <div class="account-infor-content">
                            <el-input
                                v-model="userStore.department"
                                style="width: 240px"
                                disabled
                                placeholder="Please input"
                            />
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户密码</span>
                        <div class="account-infor-content">
                            <el-button type="primary" @click="changePasswordClick">修改密码</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户姓名</span>
                        <div class="account-infor-content">
                            <el-input
                                v-model="userStore.name"
                                style="width: 240px"
                                placeholder="Please input"
                            />
                            <el-button type="primary" @click="changeNameFn">保存</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户性别</span>
                        <div class="account-infor-content">
                            <el-select style="width: 240px" v-model="userStore.sex" placeholder="please select your zone">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                              </el-select>
                            <el-button type="primary" @click="changeSexFn">保存</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>用户邮箱</span>
                        <div class="account-infor-content">
                            <el-input
                                v-model="userStore.email"
                                style="width: 240px"
                                placeholder="Please input"
                            />
                            <el-button type="primary"  @click="changeEmailFn">保存</el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="公司信息" name="second">
                    <div class="account-infor-wrapped">
                        <span>公司名称</span>
                        <div class="account-infor-content">
                            <el-input
                                v-model="CompanyIntroduce.set_name5"
                                style="width: 240px"
                                placeholder="Please input"
                            />
                            <el-button type="primary" @click="baocungongsiming">保存</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>公司介绍</span>
                        <div class="account-infor-content">
                            <el-button type="primary" @click="ChangeCompanyClick(1)">修改公司介绍</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>公司架构</span>
                        <div class="account-infor-content">
                            <el-button type="primary" @click="ChangeCompanyClick(2)">修改公司架构</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>公司战略</span>
                        <div class="account-infor-content">
                            <el-button type="primary" @click="ChangeCompanyClick(3)">修改公司战略</el-button>
                        </div>
                    </div>
                    <div class="account-infor-wrapped">
                        <span>公司高层</span>
                        <div class="account-infor-content">
                            <el-button type="primary" @click="ChangeCompanyClick(4)">修改公司高层</el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="首页管理" name="third">
                    <div class="account-infor-wrapped" v-for="(item, index) in swipperList" :key="index">
                        <span>轮播图{{index + 1}}</span>
                        <div class="account-infor-content">
                            <el-upload
                                class="avatar-uploader"
                                action="http://127.0.0.1:3007/set/uploadSwipper"
                                :show-file-list="false"
                                :on-success="handleSwiperSuccess.bind(this, item, index)"
                                :data="item"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="swipperList[index].set_value" :src="swipperList[index].set_value" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="其他设置" name="fourth">Task</el-tab-pane>
              </el-tabs>
        </div>
    </div>
    <ChangePassword ref="changePasswordFn"/>
    <ChangeCompany ref="ChangeCompanyb"/>
</template>
<script lang="ts" setup>
import BreadCrumb from "@/components/bread_crumb.vue"
import ChangeCompany from "./components/change_company.vue"
import {ref,reactive} from "vue";
import type { TabsPaneContext } from 'element-plus'
import ChangePassword from "./components/change_password.vue"
const activeName = ref('first')
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useUserInfo } from "@/store/userinfo"
import { bus } from "@/utils/mitt.js"
import { bindAccount, changeEmail, changeSex, changeName } from "@/api/userInfo"
import { getSwipperList, getCompanyIntroduceAll, changeCompanyName } from "@/api/setting"
const userStore = useUserInfo()
const breadcrumb = ref();
const item = ref({
    first: "系统设置",
    secound: "111"
})
const handleAvatarSuccess = (
  response,
) => {
    if (response.code === 0) {
        // userStore.$patch({
        //   imageUrl: response.data.url 
        // })
        bindAccount({
            account: userStore.account, 
            url: response.data.url,
            onlyId: response.data.onlyId
        }).then(res => {
            if (res.data.code === 0) {
                userStore.imageUrl = response.data.url;
                ElMessage({
                    message: res.data.msg,
                    type: "success"
                })
            } else {
                ElMessage.error('修改失败')
            }
        })
    } else {
        ElMessage.error('上传失败')
    }
}
const swipperList = ref([])
const handleSwiperSuccess = (response, index, item ) => {
    if (item.code === 0) {
        ElMessage({
            message: item.msg,
            type: "success"
        })
        let _swipperList = swipperList.value
        _swipperList[index].set_value = item.data.url
        swipperList.value = _swipperList
    } else {
        ElMessage.error(item.msg)
    }
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const changePasswordFn= ref()
const changePasswordClick = () => {
    
    changePasswordFn.value.open();
}

const ChangeCompanyb= ref()
const ChangeCompanyClick = (key) => {
    bus.emit("editorTitle", key);
    ChangeCompanyb.value.open()
}
const changeNameFn = async() => {
   const res = await changeName(userStore)
   if (res.data.code === 0) {
        ElMessage({
            message: res.data.msg,
            type: "success"
        })
   } else {
        ElMessage.error(res.data.msg)
   }
}
const changeSexFn = async() => {
   const res = await changeSex(userStore)
   if (res.data.code === 0) {
        ElMessage({
            message: res.data.msg,
            type: "success"
        })
   } else {
        ElMessage.error(res.data.msg)
   }
}
const changeEmailFn = async() => {
   const res = await changeEmail(userStore)
   if (res.data.code === 0) {
        ElMessage({
            message: res.data.msg,
            type: "success"
        })
   } else {
        ElMessage.error(res.data.msg)
   }
}

const CompanyIntroduce = reactive({
    set_name1: "",
    set_name2: "",
    set_name3: "",
    set_name4: "",
    set_name5: "",
})
const initData = async() => {
    const res = await getSwipperList();
    const ress = await getCompanyIntroduceAll()
    console.log(ress,'999999')
    swipperList.value = res.data.data
    CompanyIntroduce.set_name1 = ress.data.data.find(i => i.set_name === "公司介绍").set_text
    CompanyIntroduce.set_name2 = ress.data.data.find(i => i.set_name === "公司架构").set_text
    CompanyIntroduce.set_name3 = ress.data.data.find(i => i.set_name === "公司战略").set_text
    CompanyIntroduce.set_name4 = ress.data.data.find(i => i.set_name === "公司高层").set_text
    CompanyIntroduce.set_name5 = ress.data.data.find(i => i.set_name === "公司名称").set_text
}
initData();

const baocungongsiming = async() => {
   const res = await changeCompanyName({set_text: CompanyIntroduce.set_name5})
   if (res.data.code === 0) {
        ElMessage({
            message: res.data.msg,
            type: "success"
        })
   } else {
        ElMessage.error(res.data.msg)
   }
}
</script>
<style scoped lang="scss">
.common-wrapped {
    padding: 8px;
    background: #f5f5f5;
    height: calc(100vh - 85px);
    .common-content {
        padding: 0 10px;
        height: 100%;
        background: #fff;
        .account-infor-wrapped {
            display: flex;
            align-items: center;
            padding-left: 50px;
            margin-bottom: 24px;
            font-size: 14px;
            .account-infor-content {
                margin-left: 24px;
                margin-right: 16px;
                display: flex;
                .el-input,.el-select {
                    margin-right: 24px;
                }
                .avatar-uploader .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }
        }
        
    }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.home-wrapped {

}
</style>  

<style>
    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    
    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
    </style>